<template>
  <el-form label-width="100px">
    <el-form-item label="审批用户描述">
      <el-select v-model="node.TitleDescription" clearable placeholder>
        <template v-for="(item, index) in NodeUserDesList" :key="index">
          <el-option :value="item" />
        </template>
      </el-select>
    </el-form-item>
    <el-form-item label="岗位角色">
      <el-select
        v-model="node.AppointUserID"
        clearable
        placeholder
        @change="handleAppointUserChange"
      >
        <template v-for="item in RelationList" :key="item.id">
          <el-option :label="item.name" :value="item.id" />
        </template>
      </el-select>
    </el-form-item>
    <el-form-item label="审批人表达式">
      <el-input v-model="node.AppointCheckerExpression" readonly>
        <template #append>
          <el-button icon="el-icon-edit" @click="showExpDialog" />
        </template>
      </el-input>
    </el-form-item>
    <el-form-item label="审批人列表">
      <el-button
        type="success"
        plain
        size="mini"
        plian
        icon="el-icon-plus"
        @click="showNodeUserDialog()"
      >新增</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="node.NodeUserList" height="200" border style="width: 100%">
    <el-table-column fixed prop="UserCode" label="用户编码" width="80" />
    <el-table-column fixed prop="UserName" label="用户名称" width="70" />
    <el-table-column
      prop="OrgName"
      label="科室名称"
      width="90"
      :show-overflow-tooltip="true"
    />
    <el-table-column
      prop="ComName"
      label="单位名称"
      width="90"
      :show-overflow-tooltip="true"
    />
    <el-table-column label="是否本单位审批" width="120">
      <template #default="scope">
        <span v-if="scope.row.DoesOwnCompany === 'Y'">是</span>
        <span v-else>否</span>
      </template>
    </el-table-column>

    <!--              fixed="right"-->
    <el-table-column
      prop="ConPIM"
      label="审批条件"
      width="70"
      :show-overflow-tooltip="true"
    />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button
          type="primary"
          icon="el-icon-edit"
          circle
          size="mini"
          @click="showNodeUserDialog(scope.row)"
        />
        <el-button
          type="danger"
          icon="el-icon-delete"
          circle
          size="mini"
          @click="delNodeUser(scope.row)"
        />
      </template>
    </el-table-column>
  </el-table>

  <nodeUserEdit ref="nodeUserEdit" @save="saveNodeUser" />
</template>

<script>
import { mapState } from "vuex";
import NodeUserEdit from "./NodeUserEdit.vue";
export default {
  components: { NodeUserEdit },
  data() {
    return {};
  },
  computed: mapState({
    node: (state) => state.node.CurrentNode,
    NodeUserDesList: (state) => state.NodeUserDesList,
    RelationList: (state) => state.RelationList,
  }),
  methods: {
    // 打开编辑“审批人”的窗口
    showNodeUserDialog(obj) {
      this.$refs.nodeUserEdit.show(obj);
    },
    handleAppointUserChange(val) {
      // TODO 平台3.9版本删除此特殊定义
      const index = this.RelationList.findIndex((a) => a.id === val);
      if (this.RelationList[index].name === "部门负责人") {
        this.node.OnlyDepartmentManager = "Y";
      } else {
        this.node.OnlyDepartmentManager = "N";
      }
    },
    // 删除当前审批人
    delNodeUser(obj) {
      this.$confirm(
        `此操作无法撤销, 确认要删除【${obj.UserName}(${obj.UserCode})】吗?`,
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        },
      ).then(() => {
        const index = this.node.NodeUserList.findIndex(
          (u) => u.UserCode === obj.UserCode,
        );
        this.node.NodeUserList.splice(index, 1);
        this.$message({
          type: "success",
          message: "删除成功!",
        });
      }).catch(() => {
        // console.log('已取消删除');
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // });
      });
    },
    saveNodeUser(data) {
      // 判断是编辑还是新增
      // 根据ID去找 记录
      const index = this.node.NodeUserList.findIndex(
        (d) => d.ID === data.ID,
      );
      if (index > -1) {
        this.node.NodeUserList[index] = data;
      } else {
        // 再判断是否已经存在
        const index2 = this.node.NodeUserList.findIndex(
          (d) => d.UserCode === data.UserCode,
        );
        if (index2 > -1) {
          this.$message.error(`已存在【${data.UserName}】，不可重复添加！`);
        } else {
          this.node.NodeUserList.push(data);
        }
      }
    },
    showExpDialog() {
      this.$store.dispatch("expression/editExp", {
        Expression: this.node.AppointCheckerExpression,
        PsmExpression: "",
        ParameterXml: "",
        ResultType: "String",
        callback: this.callbackExp,
      });
    },
    callbackExp(data) {
      this.node.AppointCheckerExpression = data.Expression;
    },
  },
};
</script>

<style>
</style>
